<template>
  <div>
      <div ref="printContent">
          <i @click="doPrint" class="el-icon-share"></i>
          <div>我是需要打印的内容</div>
      </div>
      <!--打印用的隐藏的iframe-->
      <iframe width="0" height="0" frameborder="0" id="print-iframe"></iframe>

      <!-- 盖章 -->
      <div>
        <canvas id="canvas" width="200" height="200"></canvas>
      </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import chapter from '../config/chapter'
export default {
  mounted(){
        chapter('XXX专用章','XXX科技股份有限公司')
  },
	methods: {
        setIframeCss() {
            // 在打印的iframe里加样式
			let syfPrint = document.getElementById('print-iframe');
			let documentHead = document.getElementsByTagName('head')[0];
			let iframeHead = syfPrint.contentDocument.getElementsByTagName('head')[0];
			iframeHead.innerHTML = documentHead.innerHTML;
		},
		doPrint() {
			let _this = this;
			this.loading = true;
			this.setIframeCss();
			let dataURL;
			html2canvas(this.$refs.printContent, {
              backgroundColor: null,
              scale: 1
            }).then(canvas => {
				dataURL = canvas.toDataURL('image/png');
				let img = new Image();
				console.log(dataURL, 'ddwdwdw');
				img.src = dataURL;
				img.onload = function() {
					let syfPrint = document.getElementById('print-iframe');
					syfPrint.contentDocument.body.innerHTML = '<div class="common-form print-img-form">' + `<img src="${dataURL}"/>` + '</div>';
					syfPrint.contentDocument.execCommand('Print');
                    // this.$refs.iframe.contentWindow.print()
					_this.loading = false;
				};
			});
		}
    }
}
</script>
<style scoped>
</style>